Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(TreeView): support additional navigation and selection behavior #11328

Merged
merged 8 commits into from
May 4, 2022
Merged

feat(TreeView): support additional navigation and selection behavior #11328

merged 8 commits into from
May 4, 2022
+58 −3

Conversation

emyarod
Copy link
Member

@emyarod emyarod commented May 2, 2022 •
edited
Loading

Related #6792

This PR adds preliminary support for Home and End navigation as well as Shift + Home/End and Ctrl + A selection according to the tree view APG

additional testing will be done to confirm the selection model for different platforms and operating systems

Changelog

New

  • Home and End navigation
  • Ctrl + Shift + Home/End and Ctrl + A selection
  • arm64 build artifacts

Changed

  • support event.code in match utility function

Testing / Reviewing

  • Home should move focus to the first enabled node in the tree
    • Ctrl + Shift + Home should select the current node and every selectable node up until the first node in the tree
  • End should move focus to the last enabled node in the tree
    • Ctrl + Shift + End should select the current node and every selectable node up until the last node in the tree
  • Ctrl + A should select all selectable nodes in the tree

@emyarod emyarod requested a review from a team as a code owner May 2, 2022 18:07
@netlify
Copy link

netlify bot commented May 2, 2022 •
edited
Loading

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit a79b0b7
🔍 Latest deploy log https://app.netlify.com/sites/carbon-components-react/deploys/6272d9ac5c87d40009fc006b
😎 Deploy Preview https://deploy-preview-11328--carbon-components-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented May 2, 2022 •
edited
Loading

✅ Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit a79b0b7
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/6272d9ac33827b0008065cf1
😎 Deploy Preview https://deploy-preview-11328--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

tay1orjones
tay1orjones approved these changes May 2, 2022
View reviewed changes
Copy link
Member

@tay1orjones tay1orjones left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For those on mac with keyboards without the home/end key:

Home = fn + left arrow
End = fn + right arrow

https://support.apple.com/en-us/HT201236

So the full sequence that worked for me was fn + shift + left/right arrow

@emyarod emyarod force-pushed the 6792-feat/tree-view-home-end-navigation branch from 4f0f8d1 to ca3f006 Compare May 2, 2022 19:33
@emyarod emyarod mentioned this pull request May 3, 2022
Open
10 tasks
@mbgower
Copy link

mbgower commented May 3, 2022 •
edited
Loading

Home/End navigation is a good addition.
Ctrl+A is a typical select all feature. Fine with both.

However, Shift+Home is not a key I've ever heard used in a tree context before. I'm not even sure I've heard of it used in a select element. I have seen Ctrl+Sh+Home/End in a select, but not in a tree. So I do question you introducing this key combination. It doesn't seem to be in the APG.

@emyarod
Copy link
Member Author

emyarod commented May 4, 2022 •
edited
Loading

@mbgower shift + home/end seems standard for file browser contexts, so I included that originally. I have now updated it to ctrl + shift + home/end to match the suggestions in the APG

@emyarod emyarod force-pushed the 6792-feat/tree-view-home-end-navigation branch from 3702c2a to 202b813 Compare May 4, 2022 15:24
@emyarod emyarod force-pushed the 6792-feat/tree-view-home-end-navigation branch from 202b813 to 253375f Compare May 4, 2022 15:44
joshblack
joshblack approved these changes May 4, 2022
View reviewed changes
Copy link
Contributor

@joshblack joshblack left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

@kodiakhq kodiakhq bot merged commit 1e03a57 into carbon-design-system:main May 4, 2022
emyarod added a commit to emyarod/carbon that referenced this pull request May 4, 2022
@emyarod @kodiakhq
feat(TreeView): support additional navigation and selection behavior (c…
34f1309 
…arbon-design-system#11328)

* feat(TreeView): implement `Home` and `End` key navigation

* feat(TreeView): support Shift + `Home` and `End` multiselection

* feat(match): support `event.code` matching

* feat(TreeView): add `ctrl + A` selection

* chore: add arm64 build artifacts

* fix(TreeView): update shift + home/end shortcut

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
@emyarod emyarod deleted the 6792-feat/tree-view-home-end-navigation branch May 5, 2022 14:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tay1orjones tay1orjones tay1orjones approved these changes

@joshblack joshblack joshblack approved these changes

Assignees
No one assigned
Labels
status: ready to merge 🎉
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@emyarod @mbgower @tay1orjones @joshblack